/* 账号与安全 */
<template>
<div>
    <div class="PrivacySettings">隐私设置</div>
    <div class="settingBox">
        <div class="MyComments commentBox">
            <div class="settingBoxLeft">所有人可见</div>
            <div class="settingBoxRight">
                <!--mt-switch Boolean -->
                <mt-switch v-model="allowAll" @change="allowAllBtn"></mt-switch>
            </div>
        </div>
        <div class="MyComments commentBox">
            <div class="settingBoxLeft">仅我关注的人可见</div>
            <div class="settingBoxRight">
                <mt-switch v-model="onlyFollow" @change="onlyFollowBtn"></mt-switch>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import controller from "@/components/controllers/controllers";
export default {
    name: "AccountSecurity",
    components: {},
    data() {
        return {
            allowAll: false, //1是所有人可见，-1是所有人不可见
            onlyFollow: true, //1是仅关注的人可见，0是不设置
        };
    },
    mounted() {
        this.getPrivacy();
    },
    methods: {
        allowAllBtn() {
            // mt-switch选择完且页面渲染完后，在获取switch的值，否则获取到是之前的值
            this.$nextTick(() => {
                this.onlyFollow = this.allowAll ? false : true
                this.updatePrivacy();
            });
        },
        onlyFollowBtn() {
            this.$nextTick(() => {
                this.allowAll = this.onlyFollow ? false : true
                this.updatePrivacy();
            });
        },
        // 获取账号与安全的数据
        getPrivacy() {
            controller
                .privacy({
                    token: localStorage.getItem("token"),
                })
                .then((res) => {
                    console.log("获取账号与安全的数据", res);
                    this.allowAll = res.baseData.allowAll == 1 ? true : false;
                    this.onlyFollow = res.baseData.onlyFollow == 1 ? true : false;
                });
        },
        updatePrivacy() {
            console.log(
                "this.onlyFollow",
                this.onlyFollow,
                "this.allowAll",
                this.allowAll
            );
            controller
                .updatePrivacy({
                    onlyFollow: this.onlyFollow ? 1 : -1,
                    allowAll: this.allowAll ? 1 : -1,
                    token: localStorage.getItem("token"),
                })
                .then((res) => {
                    console.log("updatePrivacy", res);
                    this.$Toast.show({
                        title: "修改成功",
                    });
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.PrivacySettings {
    // width: 750px;
    line-height: 78px;
    background-color: #f6f6fa;
    padding-left: 26px;
    box-sizing: border-box;
    color: #a8acbb;
    font-size: 24px;
}

/*我的设置等--区域*/
.settingBox {
    width: 100%;
    padding: 0 25px;
    box-sizing: border-box;
    background-color: #fff;

    .MyComments {
        width: 100%;
        height: 108px;
        border-bottom: 2px solid #f2f2f2;

        .settingBoxLeft {
            font-size: 30px;
            color: #323232;
            font-weight: 500;
        }

        .settingBoxRight {
            color: #a8acbb;
            font-size: 30px;
            display: flex;
            align-items: center;
        }
    }

    .commentBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
</style>
